<template>
  <div class="discover-page">
    <div class="discover-header">
      <div class="tab-nav">
        <div 
          v-for="(tab, index) in tabs" 
          :key="index" 
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
    </div>
    
    <div class="discover-content">
      <div v-if="activeTab === 0" class="recommend-content">
        <div class="discover-card" v-for="(post, index) in recommendPosts" :key="index">
          <div class="card-header">
            <div class="user-avatar">
              <img :src="post.userAvatar" alt="Avatar" />
            </div>
            <div class="user-info">
              <div class="username">{{ post.username }}</div>
              <div class="post-time">{{ post.time }}</div>
            </div>
            <div class="follow-btn">关注</div>
          </div>
          
          <div class="card-content">
            <div class="post-text">{{ post.content }}</div>
            <div class="post-images">
              <img v-for="(img, imgIndex) in post.images" :key="imgIndex" :src="img" alt="Post image" />
            </div>
          </div>
          
          <div class="card-footer">
            <div class="action-btn like">
              <i class="icon like-icon"></i>
              <span>{{ post.likes }}</span>
            </div>
            <div class="action-btn comment">
              <i class="icon comment-icon"></i>
              <span>{{ post.comments }}</span>
            </div>
            <div class="action-btn share">
              <i class="icon share-icon"></i>
              <span>分享</span>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="other-content">
        <div class="placeholder-text">{{ tabs[activeTab] }}内容</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activeTab = ref(0);
const tabs = ref(['推荐', '关注', '附近', '直播']);

// 示例数据
const recommendPosts = ref([
  {
    username: '时尚穿搭达人',
    userAvatar: 'https://via.placeholder.com/40x40?text=User1',
    time: '10分钟前',
    content: '这款连衣裙超级显瘦，穿上立马气质提升，推荐给大家！#夏日穿搭 #显瘦穿搭',
    images: [
      'https://via.placeholder.com/150x200?text=Fashion1',
      'https://via.placeholder.com/150x200?text=Fashion2',
    ],
    likes: 328,
    comments: 42
  },
  {
    username: '美食探店',
    userAvatar: 'https://via.placeholder.com/40x40?text=User2',
    time: '1小时前',
    content: '发现一家超级好吃的日料店，这个三文鱼入口即化，好吃到哭泣！#美食推荐 #日料',
    images: [
      'https://via.placeholder.com/150x150?text=Food1',
      'https://via.placeholder.com/150x150?text=Food2',
      'https://via.placeholder.com/150x150?text=Food3',
    ],
    likes: 512,
    comments: 78
  },
  {
    username: '家居生活',
    userAvatar: 'https://via.placeholder.com/40x40?text=User3',
    time: '2小时前',
    content: '分享一下我家的小角落改造，换了这款北欧风的装饰画后，整个空间都提升了！#家居改造 #装饰灵感',
    images: [
      'https://via.placeholder.com/300x200?text=Home',
    ],
    likes: 256,
    comments: 36
  }
]);
</script>

<style scoped>
.discover-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px);
  background-color: #f5f5f5;
}

.discover-header {
  background-color: #fff;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.tab-nav {
  display: flex;
  justify-content: space-around;
}

.tab-item {
  padding: 0 15px 10px;
  font-size: 15px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff6b35;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: #ff6b35;
  border-radius: 1.5px;
}

.discover-content {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.discover-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.post-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.follow-btn {
  padding: 4px 10px;
  background-color: #f8f8f8;
  color: #ff6b35;
  border-radius: 15px;
  font-size: 12px;
}

.card-content {
  margin-bottom: 15px;
}

.post-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 10px;
}

.post-images {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -3px;
}

.post-images img {
  width: calc(33.333% - 6px);
  margin: 3px;
  border-radius: 4px;
  object-fit: cover;
}

.post-images img:only-child {
  width: 100%;
  max-height: 300px;
}

.post-images img:first-child:nth-last-child(2),
.post-images img:last-child:nth-child(2) {
  width: calc(50% - 6px);
}

.card-footer {
  display: flex;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 13px;
  color: #666;
}

.action-btn .icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  opacity: 0.7;
}

.like-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E");
}

.comment-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
}

.share-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
}

.other-content {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-text {
  font-size: 16px;
  color: #999;
}
</style> 